import React, { Component } from 'react';
import { useState } from 'react';
import { Col, Row, Input, Button, Flex, Divider, Breadcrumb, Layout, Popover, theme, Progress, Space, Table, Tag, Card, Typography } from 'antd';
import type { GetProps } from 'antd';
import NavItem from '../Tool/Navtestitem'
import HeaderComponent from '../Tool/Header';
import FeedbackModal from '../Tool/FeedbackLink';
import PdfViewer from '../Tool/PDFViewer';
import UploadPDF from '../Tool/UploadPDF';
import UploadVideo from '../Tool/UploadVideo';

type SearchProps = GetProps<typeof Input.Search>;

const { Search } = Input;

const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);

const { Content, Footer } = Layout;

const { Title, Paragraph, Text, Link } = Typography;

const content = (
  <div>
    <p>状态</p>
  </div>
);

const App: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout>
      <HeaderComponent />
      <Layout>
        <NavItem defaultSelectedKey='7' />
        <Content style={{ padding: '0 48px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>检测人员</Breadcrumb.Item>
            <Breadcrumb.Item>项目</Breadcrumb.Item>
            <Breadcrumb.Item>人员</Breadcrumb.Item>
            <Breadcrumb.Item>考核</Breadcrumb.Item>
            {/*最后一面包屑内容为点击查看详情的名*/}
          </Breadcrumb>
          <div
            style={{
              background: colorBgContainer,
              minHeight: 280,
              padding: 24,
              borderRadius: borderRadiusLG,
            }}
          >
            <Row>
              <Col span={18} offset={3}>
                <Card bordered={false} style={{ marginBottom: 16 }}>
                  <Row gutter={16}>
                    <Col span={8}>
                      <Text strong>项目名称</Text>
                    </Col>
                    <Col span={8}>
                      <Text strong>标准名称</Text>
                    </Col>
                    <Col span={8}>
                      <Text strong>标准编号</Text>
                    </Col>
                  </Row>
                </Card>
                <Divider orientation="left" orientationMargin="0">
                  <Title level={4}>考试考核</Title>
                  <Popover content={content} title="进度状态">
                    <Button type="primary">进度</Button>
                  </Popover>
                </Divider>
                <PdfViewer pdfUrl="https://example.com/document.pdf" />
                <Divider />
                <Flex justify={'space-around'} align={'center'}>
                  <Space>
                    <p style={{ fontSize: '18px', fontWeight: 'bold' }}>卷面考核:</p>
                    <UploadPDF />
                  </Space>
                  <Space>
                    <p style={{ fontSize: '20px', fontWeight: 'bold' }}>操作考核:</p>
                    <UploadVideo />
                  </Space>
                </Flex>
              </Col>
            </Row>
          </div>
        </Content>
      </Layout>
      <Footer style={{ textAlign: 'center' }}>
        <FeedbackModal />
        <Paragraph>版权所有 © 2024 软件项目管理 #4</Paragraph>
      </Footer>
    </Layout>
  );
};

export default App;